/*
 * @Author: KaminStern
 * @Date: 2024-12-24 15:59:33
 * @LastEditors: KaminStern
 * @LastEditTime: 2024-12-24 18:44:59
 * @Description: 表格页面，其中type使用自定义的树形筛选
 */
import React, { memo, useEffect, useState } from 'react';
import { Table, Button, Tree } from 'antd';
import { FilterFilled } from '@ant-design/icons';
import fakeData from './data';
import "./treeSelect.less";

const MyTable: React.FC = ()  =>{

    const [checkedKeys, setCheckedKeys] = useState([]); // 用于控制复选框选中状态，始终保持只选中一个

    const [tableData, setTableData] = useState([]);   // 获取表单数据

    useEffect(() => {
      // 初始化
      setCheckedKeys([]);
    }, []);

    useEffect(() => {
      getTableData(checkedKeys);
    }, [checkedKeys]);


    /**
     * @description: 获取表格数据
     * @return {*}
     */  
    const getTableData = (checkedKeys) => {
      if(checkedKeys.length === 0){
        setTableData(fakeData);
      }else{
        setTableData(fakeData.filter(item => item.type === checkedKeys[0]));
      }
    }

    /**
     * @description: 类型选中反馈
     * @param {*} checkedKeys
     * @param {*} param2
     * @return {*}
     */  
    const onCheck = (checkedKeys, { checked, node }) => {      
      if (checked) {
        // 如果当前节点被选中，确保只选中这一个节点
        setCheckedKeys([node.key]);
      } else {
        // 如果当前节点被取消选中，确保没有节点被选中
        setCheckedKeys([]);
      }
    };

    /**
    * @description: 构建筛选树结构
    */
    const filterTreeDropdown = (setSelectedKeys, selectedKeys, confirm, clearFilters, close) => {
      return (
        <div style={{ padding: 8 }} className="checkbox">
          <Tree
            checkable
            checkStrictly={true}
            treeData={treeType}
            checkedKeys={checkedKeys}
            // onSelect={onSelect}
            onCheck={onCheck}
          />
          <div style={{ overflow: 'hidden' }}>
            <Button
              type="link"
              onClick={() => {
                setCheckedKeys([]);
              }}
              size="small"
              style={{ marginTop: 8, float: 'left' }}
            >
              重置
            </Button>
            <Button
              type="primary"
              onClick={() => {
                confirm();
                getTableData(checkedKeys);
              }}
              size="small"
              style={{ marginTop: 8, float: 'right' }}
            >
              确定
            </Button>
          </div>
        </div>
      );
    };
  
    const treeType = [
      {
        title: "类型1",
        key: '1',
        children: [
          {
            title: '类型1-1',
            key: '1-1',
          },
          {
            title: '类型1-2',
            key: '1-2',
          },
        ],
      },
      {
        title: "类型2",
        key: '2',
        children: [
          {
            title: '类型2-1',
            key: '2-1',
          },
          {
            title: '类型2-2',
            key: '2-2',
          },
        ],
      }
    ];
    
    const columns = [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
            title: 'Type',
            dataIndex: 'type',
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close}) => {
              return filterTreeDropdown(setSelectedKeys, selectedKeys, confirm, clearFilters, close);
            },
            filterIcon: (filtered: boolean) => (
              <FilterFilled style={{ color: filtered ? '#6b80df' : undefined }} />
            ),
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
    ] as any;

    const onChange = ( pagination, filters, sorter, extra) => {
      console.log(checkedKeys);
    };
    
    return (
    <div>
      <Table columns={columns} dataSource={tableData} onChange={onChange} />
    </div>
  );
}

export default memo(MyTable);